<template>
  <div class="painter">
    <canvas width="9999" height="1000" id="background"></canvas>
  </div>
</template>

<script setup lang="ts">
  import { onMounted } from "vue";

  let canvas:HTMLCanvasElement;
  let ctx: CanvasRenderingContext2D;

  onMounted(() => {
    canvas = document.getElementById('background') as HTMLCanvasElement;
    ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
    initBackground()
  })

  function initBackground () {
    ctx.fillStyle = "#42a5f5"
    let i = 0
    while (i < 1000) {
      ctx.fillRect(0, i * 15, 9999, 1);
      ctx.fillRect(i * 15, 0, 1, 9999);
      i++
    }
  }
</script>

<style lang="scss" scoped>
.painter {
  background: rgba(66, 165, 245, .1);
  overflow: hidden;
  opacity: .3;
}
</style>